<template>
    <div class="forgot-password-container">
      <BackgroundVideo />
      <div class="form-container">
        <h1>忘记密码</h1>
        <form @submit.prevent="handleForgotPassword">
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" v-model="username" required />
          </div>
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" v-model="email" required />
          </div>
          <button type="submit">发送重置链接</button>
        </form>
        <router-link to="/login">返回登录</router-link>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
//   import api from '@/api/forgotPassword';
  import BackgroundVideo from '@/components/BackgroundVideo.vue'; // 引入背景视频组件
  
  const router = useRouter();
  const username = ref('');
  const email = ref('');
  
  const handleForgotPassword = async () => {
    const res = await api.sendResetLink({
      username: username.value,
      email: email.value,
    });
  
    if (res.data.code === 200) {
      alert('重置链接已发送，请检查您的邮箱');
      router.push('/login');
    } else {
      alert('发送失败：' + res.data.message);
    }
  };
  </script>
  
  <style scoped>
  .forgot-password-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    z-index: 1; /* 确保表单在视频之上 */
  }
  
  .form-container {
    background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1; /* 确保表单在视频之上 */
  }
  
  .form-group {
    margin-bottom: 15px;
    margin-right: 20px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  </style>